<!DOCTYPE html>
<title>Test for CSSStyleDeclaration.getAuthoredPropertyValue()</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<script>
var values = [
  // specified value         // returned from getAuthoredPropertyValue()
  "#12F",                    "#12f",
  "#1122FF",                 "#1122ff",
  "rgb(10,20,30)",           "rgb(10, 20, 30)",
  "Rgb(300,20,30)",          "rgb(255, 20, 30)",
  "rgba(10,20,30,0.250)",    "rgba(10, 20, 30, 0.25)",
  "OrangeRed",               "OrangeRed",
  "rgb(10%,25%,99%)",        "rgb(10%, 25%, 99%)",
  "rgb(6.66667%,0%,0.0%)",   "rgb(6.66667%, 0%, 0%)",
  "HSL(0,25%,75%)",          "hsl(0, 25%, 75%)",
  "hsl(60,0%,0%)",           "hsl(60, 0%, 0%)",
  "hsla(60,50%,50%,0.1250)", "hsla(60, 50%, 50%, 0.125)",
  "rgba(0,0,0,0)",           "rgba(0, 0, 0, 0)",
  "rgba(50,50,50,1)",        "rgb(50, 50, 50)",
  "rgba(50%,50%,50%,1)",     "rgb(50%, 50%, 50%)",
  "hsla(0,25%,75%,1)",       "hsl(0, 25%, 75%)",
];

var properties = [
  // property to test with  // fixed suffix to ignore from getAuthoredPropertyValue()
  "color",                  "",
  "background-color",       "",
  "background",             " none repeat scroll 0% 0%"
];

function runTest() {
  var span = document.createElement("span");
  for (var j = 0; j < properties.length; j += 2) {
    var propertyName = properties[j];
    var expectedSuffix = properties[j + 1];
    for (var i = 0; i < values.length; i += 2) {
      var value = values[i];
      var expected = values[i + 1];
      span.setAttribute("style", propertyName + ": " + value);
      is(span.style.getAuthoredPropertyValue(propertyName), expected + expectedSuffix, "specified " + value);
    }
  }

  // also test a custom property
  span.setAttribute("style", "--color: rgb(10%,25%,99%)");
  is(span.style.getAuthoredPropertyValue("--color"), " rgb(10%,25%,99%)", "specified --color");

  SimpleTest.finish();
}

SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
                          runTest);
</script>
